<template>
  <div>
    <c-title :hide="false" :text="title"> </c-title>
    <van-tabs v-model="active" title-active-color="#f49f19" sticky @click="selectTab" color="#f49f19">
      <van-tab title="未完成" name="0">
        <div class="blank" v-if="projectList.length <= 0">
          <img src="../../../assets/images/blank.png" />
          <span>还没有记录哦</span>
        </div>
        <div class="list-box" v-else>
          <div class="list-item" v-for="(item, i) in projectList" :key="i">
            <div class="top" v-if="item.has_one_order_project">
              <div class="left"><img :src="item.has_one_order_project.project_thumb" alt="" /></div>
              <div class="right">
                <div class="title">
                  <p class="title_t">{{ item.has_one_order_project.project_title }}</p>
                  <div class="typeBox">{{ item.service_type ? "上门服务" : "预约门店" }}</div>
                </div>
                <p class="store_name" v-if="item.has_one_store">门店名称：{{ item.has_one_store.store_name }}</p>
                <div class="name-box" v-if="item.has_one_worker">
                  <div class="name overflow"><i style="color: #f49f19; vertical-align: middle;" class="iconfont icon-stores_staff"></i>{{ item.has_one_worker.name }}</div>
                  <div class="yellow" @click="sure(item.id)">取消预约</div>
                </div>
              </div>
            </div>
            <div class="down">
              <div class="phone">
                <p class="left overflow">顾客名称：{{ item.customer_name }}</p>
                <p class="right">联系方式：{{ item.customer_tel }}</p>
              </div>
              <p class="time">预约时间：{{ item.begin_time }} - {{ item.end_time }}</p>
              <p class="time" v-if="item.has_one_order_project && item.has_one_order_project.rest_count">顾客{{ appointmentLang.project }}剩余次数：{{ item.has_one_order_project.rest_count }}</p>
              <p class="time" v-if="item.remark">备注：{{ item.remark }}</p>
              <div class="workerBox" v-if="show_worker">
                <div class="workerBox_l">技师名称：{{ item.has_one_worker.name }}</div>
                <div class="workerBox_r" @click="showWorkPopup(item)">更换技师</div>
              </div>
              <div class="loc" v-if="item.service_type == 1 && item.service_address" @click="goToAdress(item.service_address)">
                <div class="locDist">上门服务地址：{{ addressSet(item) }}</div>
                <div class="locTxt"><i class="iconfont icon-order_locate"></i>{{ item.service_address.distance }}{{ item.service_address.unit }}</div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已完成" name="1">
        <div class="blank" v-if="projectList.length <= 0">
          <img src="../../../assets/images/blank.png" />
          <span>还没有记录哦</span>
        </div>
        <div class="list-box" v-else>
          <div class="list-item" v-for="(item, i) in projectList" :key="i">
            <div class="top" v-if="item.has_one_order_project">
              <div class="left"><img :src="item.has_one_order_project.project_thumb" alt="" /></div>
              <div class="right">
                <div class="title">
                  <p class="title_t">{{ item.has_one_order_project.project_title }}</p>
                  <div class="typeBox">{{ item.service_type ? "上门服务" : "预约门店" }}</div>
                </div>
                <div class="name-box" v-if="item.has_one_worker">
                  <div class="name overflow"><i style="color: #f49f19; vertical-align: middle;" class="iconfont icon-stores_staff"></i>{{ item.has_one_worker.name }}</div>
                </div>
              </div>
            </div>
            <div class="down">
              <div class="phone">
                <p class="left overflow">顾客名称：{{ item.customer_name }}</p>
                <p class="right">联系方式：{{ item.customer_tel }}</p>
              </div>
              <p class="time">预约时间：{{ item.begin_time }} - {{ item.end_time }}</p>
              <p class="time" v-if="item.has_one_order_project && item.has_one_order_project.rest_count">顾客{{ appointmentLang.project }}剩余次数：{{ item.has_one_order_project.rest_count }}</p>
              <p class="time" v-if="item.remark">备注：{{ item.remark }}</p>
              <div class="loc" v-if="item.service_type == 1 && item.service_address" @click="goToAdress(item.service_address)">
                <div class="locDist">上门服务地址：{{ addressSet(item) }}</div>
                <div class="locTxt"><i class="iconfont icon-order_locate"></i>{{ item.service_address.distance }}{{ item.service_address.unit }}</div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已取消" name="9">
        <div class="blank" v-if="projectList.length <= 0">
          <img src="../../../assets/images/blank.png" />
          <span>还没有记录哦</span>
        </div>
        <div class="list-box" v-else>
          <div class="list-item" v-for="(item, i) in projectList" :key="i">
            <div class="top" v-if="item.has_one_order_project">
              <div class="left"><img :src="item.has_one_order_project.project_thumb" alt="" /></div>
              <div class="right">
                <div class="title">
                  <p class="title_t">{{ item.has_one_order_project.project_title }}</p>
                  <div class="typeBox">{{ item.service_type ? "上门服务" : "预约门店" }}</div>
                </div>
                <div class="name-box" v-if="item.has_one_worker">
                  <div class="name overflow"><i style="color: #f49f19; vertical-align: middle;" class="iconfont icon-stores_staff"></i>{{ item.has_one_worker.name }}</div>
                </div>
              </div>
            </div>
            <div class="down">
              <div class="phone">
                <p class="left overflow">顾客名称：{{ item.customer_name }}</p>
                <p class="right">联系方式：{{ item.customer_tel }}</p>
              </div>
              <p class="time">预约时间：{{ item.begin_time }} - {{ item.end_time }}</p>
              <p class="time" v-if="item.has_one_order_project && item.has_one_order_project.rest_count">顾客{{ appointmentLang.project }}剩余次数：{{ item.has_one_order_project.rest_count }}</p>
              <p class="time" v-if="item.remark">备注：{{ item.remark }}</p>
              <div class="loc" v-if="item.service_type == 1 && item.service_address" @click="goToAdress(item.service_address)">
                <div class="locDist">上门服务地址：{{ addressSet(item) }}</div>
                <div class="locTxt"><i class="iconfont icon-order_locate"></i>{{ item.service_address.distance }}{{ item.service_address.unit }}</div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-popup v-model="show" round position="bottom" :style="{ height: '30rem' }">
      <div class="projectManageTechnician">
        <van-nav-bar title="选择技师" left-text="取消" @click-left="onClickLeft" @click-right="onClickRight">
          <span slot="right"></span>
        </van-nav-bar>
        <van-search v-model="keyword" placeholder="搜索技师ID/名称" @search="searchLis" />
        <div class="list">
          <div class="lis" v-for="(item, index) in popupList.data" :key="index">
            <div class="img">
              <img :src="item.thumb" alt="" />
            </div>
            <div class="contenDetail">
              <div class="user">
                <span class="name">{{ item.name }}</span>
                <div class="no">ID:{{ item.id }}</div>
              </div>
              <div class="dec">{{ item.description || "" }}</div>
            </div>
            <div class="btn" @click="selectTechnician(item)">选择</div>
          </div>
          <van-empty v-if="popupList.data.length <= 0" image="search" description="暂无更多"></van-empty>
          <div class="more" @click="tapMore" v-if="popupList.page < popupList.last_page">点击加载更多</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import appointment_project_controller from "./appointment_project_controller";

export default appointment_project_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.list-box {
  background-color: #fff;
  padding: 1rem;
}

.list-item {
  box-shadow: 0 0 0.469em 0 rgba(0, 0, 0, 0.08);
  border-radius: 0.313em;
  padding: 0.5rem;
  margin-bottom: 1em;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.top {
  display: flex;

  .left {
    width: 4.344em;
    height: 4.344em;
    border-radius: 0.156em;
    flex: 0 0 4.344em;

    img {
      width: 4.344em;
      height: 4.344em;
      border-radius: 0.156em;
    }
  }

  .right {
    margin-left: 0.5em;
    flex: 1;
    display: flex;
    flex-direction: column;
    .title {
      .title_t {
        flex: 1;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .store_name {
      font-size: 13px;
      color: #999;
      margin-top: 0.3rem;
    }

    .name-box {
      display: flex;
      font-size: 12px;
      margin-top: 0.3rem;
    }

    .name {
      flex: 1;
      line-height: 1.5rem;
    }
  }
}

.yellow {
  flex: 0 0 5rem;
  text-align: center;
  width: 5rem;
  line-height: 1.25rem;
  background-color: #f49f19;
  border-radius: 15px;
  color: #fff;
  padding: 0.2rem 0.4rem;
}

.down {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  margin-top: 0.5rem;
  .workerBox {
    margin: 0.2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    .workerBox_l {
      flex: 1;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .workerBox_r {
      flex-shrink: 0;
      border: 1px solid #f49f19;
      color: #f49f19;
      padding: 0.2rem 0.3rem;
      border-radius: 0.625rem;
    }
  }

  .phone {
    display: flex;
    margin-bottom: 0.5rem;
  }

  .left {
    flex: 1;
  }

  .right {
    flex: 0 0 12em;
    text-align: right;
  }

  .time {
    margin: 0.2rem 0;
  }
}
.projectManageTechnician {
  .txt {
    margin: 0.94rem 0.81rem;
    font-weight: 500;
    font-size: 0.88rem;
    text-align: left;
  }
  .more {
    text-align: center;
    color: #999;
    margin-top: 1rem;
  }
  .list {
    margin: 0 0.75rem;
    margin-top: 0.63rem;
    height: 22rem;
    overflow-y: scroll;
    .lis {
      padding: 0.75rem 0.63rem 0.75rem 0.63rem;
      margin-bottom: 0.63rem;
      box-sizing: border-box;
      background: #fff;
      border-radius: 0.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .img {
        width: 2.75rem;
        height: 2.75rem;
        background: #f0f0f1;
        border-radius: 50%;
        margin-right: 0.38rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .btn {
        font-size: 0.81rem;
        color: #ffffff;
        width: 3rem;
        height: 1.75rem;
        background: #f15353;
        border-radius: 1.88rem;
        text-align: center;
        line-height: 1.75rem;
      }
      .contenDetail {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        flex: 1;
        .user {
          display: flex;
          align-items: center;
          .name {
            flex-grow: bold;
            font-size: 0.88rem;
            margin-right: 0.34rem;
          }
          .no {
            font-size: 0.75rem;
            color: #6e6e79;
            padding: 0.13rem 0.22rem;
            background: #ffffff;
            border-radius: 0.25rem;
            box-sizing: border-box;
            border: 1px solid #d6d6dc;
            border-radius: 0.25rem;
          }
        }
        .dec {
          font-size: 0.81rem;
          color: #6e6e79;
        }
      }
    }
  }
}
.loc {
  margin-top: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  .locTxt {
    flex-shrink: 0;
    color: #6e6e79;
    text-align: left;
    .iconfont {
      color: #6e6e79;
    }
  }
  .locDist {
    margin-right: 1rem;
    color: #6e6e79;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.typeBox {
  flex-shrink: 0;
  width: 5rem;
  text-align: center;
  padding: 0.2rem 0;
  background: #ffa655;
  color: #fff;
  font-size: 13px;
  border-radius: 0.3rem;
}
</style>
